<template>
    <div class="app-container">
        <el-form :inline="true" :model="initParams" class="demo-form-inline" label-width="135px" size="small">
            <el-form-item label="开始考试日期" label-width="100px">
                <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                    type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束考试日期">
                <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                    type="date" placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="考试科目">
                <el-select v-model="formInline.value1" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="预约单号">
                <el-input v-model="formInline.value1" placeholder="" />
            </el-form-item>
            <el-form-item label="教学教练">
                <el-select v-model="formInline.value1" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <div @click="showMore = !showMore" style="color: #606266;cursor: pointer;
                position: absolute;width: 100px;right: -40px;top: 85px;">{{ showMore ? '收起' : '展开' }}</div>
           <template v-if="showMore">
             <el-form-item label="成绩录入日期" label-width="100px">
                    <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="成绩录入结束日期">
                    <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>


                <el-form-item label="是否过关">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科二教练">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科三教练">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始复批日期" label-width="100px">
                    <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束复批日期">
                    <el-date-picker size="small" @change="svdateChange" value-format="yyyy-MM-dd" v-model="initParams.svdate"
                        type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="是否过关">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="挂靠点">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" label-width="100px">
                    <el-select v-model="formInline.value1" placeholder="请选择">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
           </template>
           <el-form-item label-width="0px" label=" ">
                <el-button type="primary" icon="el-icon-search" @click="getExamDetail()">查询</el-button>
                <el-button type="info" icon="el-icon-download" plain>导出</el-button>
                <el-button type="info" icon="el-icon-download" plain>导入本地文件</el-button>
                <el-button type="info" plain>选取文件</el-button>
                <el-button type="info" plain>成绩模板</el-button>
            </el-form-item>
        </el-form>
        <main>
            <div class="mt-1">
                <el-tabs v-model="tabs" type="card" @tab-click="handleClick">
                    <el-tab-pane :label="v.label" :name="v.name" v-for="(v, i) in tabsArr" :key="i"></el-tab-pane>
                </el-tabs>
                <div :style="{height: tableHeight }">
                    <el-table :data="tableData" border height="100%" :default-sort="{ prop: 'date', order: 'descending' }">
                        <el-table-column sortable prop="id" label="ID" width="120" align="center" />
                        <el-table-column sortable prop="pid" label="TID" width="120" align="center">
                            <template slot-scope="scope">
                                <span style="color: #4d4de2;cursor: pointer;"
                                    @click="go(scope.row, 'http://jx.qida999.com/DriverCommon/Area/GDHZ/DrTextReady1.html')">{{
                                        scope.row.tid }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column sortable prop="pid" label="PID" width="120" align="center">
                            <template slot-scope="scope">
                                <span style="color: #4d4de2;cursor: pointer;"
                                    @click="go2(scope.row, 'http://jx.qida999.com/DriverCommon/driver/dr_person.html')">{{
                                        scope.row.pid }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column sortable prop="name" label="姓名" width="150" align="center" />
                        <el-table-column sortable prop="car" label="车型" width="100" align="center" />
                        <el-table-column sortable prop="com_name" label="挂靠点" width="120" align="center" />
                        <el-table-column sortable prop="km" label="考试科目" width="150" align="center" />
                        <el-table-column sortable prop="" label="分数" width="150" align="center" />
                        <el-table-column sortable prop="leader" label="待考教练" width="200" align="center" />
                        <el-table-column sortable prop="leader0" label="科二教练" width="120" align="center" />
                        <el-table-column sortable prop="leader2" label="科三教练" width="120" align="center" />
                        <el-table-column sortable prop="vdate" label="考试日期" width="120" align="center" />
                        <el-table-column sortable prop="" label="考试场次" width="120" align="center" />
                        <el-table-column sortable prop="ep" label="预约单备注" width="180" align="center" />
                        <el-table-column sortable prop="" label="是否过关" width="120" align="center" />
                        <el-table-column sortable prop="" label="录入人" width="120" align="center" />
                        <el-table-column sortable prop="" label="成绩录入日期" width="150" align="center" />
                        <el-table-column sortable prop="" label="批复时间" width="150" align="center" />
                    </el-table>
                </div>
            </div>
        </main>

        <!-- 分页 -->
        <div class="pagin">
            <el-pagination background :current-page="initParams.page || 1" :page-sizes="[20, 50, 100, 150]"
                :page-size="initParams.pageSize || 20" layout="total, sizes, prev, pager, next, jumper" :total="total || 90"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        
    </div>
</template>

<script>
import { examDetailAPI } from '@/api/adminstare'
import { tomorrow, today } from '@/utils/date' //明天和今天的日期
/**
* @author        chenRong
* @time          2023-11-16 17:22:40  星期四
* @description   考试明细
**/
export default {
    data() {
        return {
            formInline: {
                value1: ""
            },
            todayDate: [],//今天的考试日期 默认值
            value1: "",
            tabs: '',
            tabsArr: [
                { label: '考试明细', name: '0' },
                { label: '明日考试', name: '1' },
                { label: '今日批复', name: '2' },
            ],
            tableData: [],
            total: 0,
            // 初始化参数
            initParams: {
                action: 'examDetailList',
                svdate: "",//考试起止日期
                page: 1,
                pageSize: 20
            },
            showMore: false,
            tableHeight: '590px'
        }
    },
    watch: {
        showMore(newValue, oldValue) {
            console.log(newValue);
            if (newValue) {
                this.tableHeight = '500px'
            } else { 
                this.tableHeight='590px'
            }
        },
        deep:true
    },
    mounted() {
        this.getExamDetail()
    },
    methods: {
        async getExamDetail() {
            console.log('initParams', this.initParams);

            // !!!接口接受的是form-data类型的JOSN，数组传递过去 ''号会变成"" 一定要后端处理一下''和"" 不管是那种格式都要是成功并且返回数据
            // 或者前端需要处理数组的单引和双引 替换

            // this.initParams.svdate = ['2023-04-13', '2023-04-13']成功
            // this.initParams.svdate = ["2023-04-13","2023-04-13"] 失败

            let { data, code, total } = await examDetailAPI(this.initParams)
            if (!code) {
                this.tableData = data
                this.total = total
            }
        },

        // 考试日期发生变化
        svdateChange(date) {
            console.log(date);

            if (date == null) {
                this.initParams.svdate = []
            }
            this.getExamDetail()
        },

        //  跳旧版详情
        go(val, URL) {
            const redirectUrl = `${URL}?id=${val.tid}&aid=${this.$store.getters.userInfo.jxid}`
            this.$oldLoginSystem(redirectUrl)
        },
        go2(val, URL) {
            const redirectUrl = `${URL}?id=${val.pid}&aid=${this.$store.getters.userInfo.jxid}`
            this.$oldLoginSystem(redirectUrl)
        },

        // 当前显示的条数 发生改变时触发
        handleSizeChange(pageSize) {
            this.initParams.pageSize = pageSize
            this.getExamDetail()
        },
        // 当前页码发生改变时触发
        handleCurrentChange(page) {
            this.initParams.page = page
            this.getExamDetail()
        },

        // tab选项变化
        handleClick(tab) {
            if (tab.index == 0) { //考试明细
                this.initParams.svdate = []
            }

            // 明日考试
            if (tab.index == 1) {
                this.initParams.svdate = []
                this.initParams.svdate.push(tomorrow())
                this.initParams.svdate.push(tomorrow())

                // this.initParams.type='texttime'
            } else if (tab.index == 2) { //今日批复
                this.initParams.svdate = []
                this.initParams.svdate.push(today())
                this.initParams.svdate.push(today())
            }
            this.getExamDetail()
        },
    }
}
</script>

<style lang="scss" scoped></style>